<template>
  <div class="app-container map-wrapper">
    <div class="ol-map" id="ol-map">
      <baseMapSwitch v-show="visibleBaseMap" @change="changeMapType" :id="antiquityroadId" @close="handleBaseVisible" />
      <PlaceSearch />
    </div>
  </div>
</template>

<script setup lang="ts">
import OlMap from '@/utils/OlMap'
import { ref, onMounted } from "vue"
import { queryAntiquityRoadPointGeoJson, queryAntiquityRoadGeojson } from "@/api/map/index.ts"
import baseMapSwitch from "./mapComponents/baseMapSwitch.vue"
import PlaceSearch from "./mapComponents/PlaceSearch.vue"
import { AxiosResponse } from "axios";

const olMapRef = ref()
const visibleBaseMap = ref(false)
const antiquityRoadLineData = ref(<any>[])
const antiquityroadId = ref("")
onMounted(() => {
  olMapRef.value = new OlMap('ol-map')
  olMapRef.value.createBaseLayer();
  getAntiquityRoadPointGeoJson()
})

async function getAntiquityRoadPointGeoJson() {
  const res = await queryAntiquityRoadPointGeoJson()
  // console.log(res)
}

//切换基础底图
function changeMapType(type: string, info: { url: any; letteringUrl: any }) {
  if (type == 'base') {
    olMapRef.value?.createBaseLayer(info.url, info.letteringUrl)
  } else if (type == 'image') {
    const zoom = olMapRef.value?.view.getZoom()
    if (zoom < 14) {
      ElMessage({
        message: '请放大地图后查看',
        type: 'warning',
      })
      return;
    }
    olMapRef.value?.setImageMaps(info)
  } else {
    if (info) {

    }
  }
}

function handleBaseVisible(info: boolean) {
  visibleBaseMap.value = info;
}

//开启全景
function openPanoram() {
  olMapRef.value.renderAntiquityRoadLineBuffer(antiquityRoadLineData.value);
  olMapRef.value.addMouseMoveEvent()

}

//获取古道路线
async function getAntiquityRoadGeoJson() {
  const params = {
    id: antiquityroadId.value
  }
  let responseData = await queryAntiquityRoadGeojson(params)
  antiquityRoadLineData.value = responseData || []
  olMapRef.value.renderAntiquityRoadLine(antiquityRoadLineData.value)
}
</script>

<style lang="scss" scoped>
.map-wrapper {
  position: relative;
  height: calc(100vh - 85px);
  width: 100%;

  .ol-map {
    height: 100%;
    width: 100%;
  }
}
</style>
